<%@ page import="org.springframework.ui.Model" %>
<%@ page import="java.util.List" %>
<%@ page import="com.lanou3g.demo.entity.Service" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/10/9
  Time: 11:45
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"
         isELIgnored="false" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>service</title>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global_color.css"/>
    <script src="<%=request.getContextPath()%>/styles/jquery-3.3.1.js"></script>
    <script language="javascript" type="text/javascript">



    //显示角色详细信息
    //     function showDetail(flag, a) {
    //         var detailDiv = a.parentNode.getElementsByTagName("div")[0];
    //         if (flag) {
    //             detailDiv.style.display = "block";
    //         }
    //         else
    //             detailDiv.style.display = "none";
    //     }

        //删除
        // function deleteAccount() {
        //     var r = window.confirm("确定要删除此业务账号吗？删除后将不能恢复。");
        //     document.getElementById("operate_result_info").style.display = "block";
        //    //confirm模态确认框 r 点确定r就是true，取消r就是false
        //    if (r) {
        //        $.ajax({
        //         type:"GET",
        //            url:"/serviceController/delete",
        //            data:"JSON"
        //        })
        //    }
        // }

        //开通或暂停
        // function setState() {
        //     var r = window.confirm("确定要暂停此业务账号吗？");
        //     document.getElementById("operate_result_info").style.display = "block";
        //     if (r) {
        //         $.ajax({
        //             type: "GET",
        //             url: "/serviceController/pause",
        //             data: "JSON"
        //         })
        //     }
        // }
    </script>
</head>
<body>

<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="<%=request.getContextPath()%>/admins/exit">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <c:import url="../navigation.jsp"/>
    <script>
        var li = document.getElementById("menu").children;
        var title = document.getElementsByTagName('title')[0].textContent;
        for (let i = 0; i < li.length; i++) {
            if (li[i].children[0].className.startsWith(title)){
                li[i].children[0].className = title + '_on';
            }
        }
    </script>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <form action="<%=request.getContextPath()%>/serviceController/findAllByCondition" method="post">
        <!--查询-->
        <div class="search_add">
            <div>OS 账号：<input name="osUsername" type="text" class="width100 text_search" value="${OsUsername}"/></div>
            <div>服务器 IP：<input name="unixHost" type="text" class="width100 text_search" value="${UnixHost}"/></div>
            <div>身份证：<input name="idcardNo" type="text"  class="text_search" value="${IdcardNo}"/></div>
            <div>状态：
                <select name="status" class="select_search">
                    <c:if test="${status.equals('')|| status == 0}">
                        <option value="" name="status" selected="selected">全部</option>
                        <option value="1">开通</option>
                        <option value="2">暂停</option>
                        <option value="3">删除</option>
                    </c:if>
                    <c:if test="${status == 1}">
                        <option value="">全部</option>
                        <option value="1" name="status" selected="selected">开通</option>
                        <option value="2">暂停</option>
                        <option value="3">删除</option>
                    </c:if>
                    <c:if test="${status == 2}">
                        <option value="">全部</option>
                        <option value="1">开通</option>
                        <option value="2" name="status" selected="selected">暂停</option>
                        <option value="3">删除</option>
                    </c:if>
                    <c:if test="${status == 3}">
                        <option value="">全部</option>
                        <option value="1">开通</option>
                        <option value="2">暂停</option>
                        <option value="3" name="status" selected="selected">删除</option>
                    </c:if>
                </select>
            </div>
            <div><input type="submit" value="搜索" class="btn_search"/></div>
            <input type="button" value="增加" class="btn_add" onclick="location.href='/service/service_add.jsp';"/>
        </div>
        <!--删除的操作提示-->
        <div id="operate_result_info" class="operate_success">
            <img src="../images/close.png" onclick="this.parentNode.style.display='none';"/>
            删除成功！
        </div>
        <!--数据区域：用表格展示数据-->
        <div id="data">
            <table id="datalist">
                <tr>
                    <th class="width50">业务ID</th>
                    <th class="width70">账务账号ID</th>
                    <th class="width150">身份证</th>
                    <th class="width70">姓名</th>
                    <th>OS 账号</th>
                    <th class="width50">状态</th>
                    <th class="width100">服务器 IP</th>
                    <th class="width100">资费</th>
                    <th class="width200"></th>
                </tr>
                <c:forEach var="service" items="${serviceList}">
                <tr class="${service.accountId}">
                    <td><a href="<%=request.getContextPath()%>/serviceController/selectAllDetail?serviceId=${service.serviceId}" title="查看明细">${service.serviceId}</a></td>
                    <td>${service.accountId}</td>
                    <td>${service.account.idcardNo}</td>
                    <td>${service.account.realName}</td>
                    <td>${service.osUsername}</td>
                    <td>
                        <%--复制= 判断== --%>
                        <c:if test="${service.status==1}">
                            开通
                        </c:if>
                        <c:if test="${service.status==2}">
                            暂停
                        </c:if>
                        <c:if test="${service.status==3}">
                            删除
                        </c:if>
                    </td>
                    <td>${service.unixHost}</td>
                    <td>
                        <a class="summary">${service.cost.name}</a>
                        <!--浮动的详细信息-->
                        <div class="detail_info">
                            ${service.cost.descr}
                        </div>
                    </td>
                    <td class="td_modi">
                    <c:if test="${service.status==1}">
                        <input id="btn1" type="button" value="暂停" class="btn_pause" />
                        <input id="btn2" type="button" value="修改" class="btn_modify"/>
                        <input id="btn3" type="button" value="删除" class="btn_delete" />
                    </c:if>
                   <c:if test="${service.status==2}">
                       <input id="btn1" type="button" value="开通" class="btn_start" />
                       <input id="btn2" type="button" value="修改" class="btn_modify"/>
                       <input id="btn3" type="button" value="删除" class="btn_delete" />
                   </c:if>
                    </td>
                </tr>
                </c:forEach>
            </table>

            <p>业务说明：<br/>
                1、创建即开通，记载创建时间；<br/>
                2、暂停后，记载暂停时间；<br/>
                3、重新开通后，删除暂停时间；<br/>
                4、删除后，记载删除时间，标示为删除，不能再开通、修改、删除；<br/>
                5、业务账号不设计修改密码功能，由用户自服务功能实现；<br/>
                6、暂停和删除状态的账务账号下属的业务账号不能被开通。</p>
        </div>
        <!--分页-->
        <%--<script>--%>
            <%--$(function () {--%>
                <%--var url = "/serviceController/findByPage"--%>
                <%--.get(url);--%>
            <%--})--%>
        <%--</script>--%>
        <div id="pages">
            <button id="p" name="page" value="1">首页</button>
            <button id="p" name="page" value="${currentPage - 1}">上一页</button>
            <c:forEach varStatus="i" begin="0" end="${totalPage -1 }">
                <button id="p2" name="page" value="${i.count}">${i.count}</button>
            </c:forEach>
            <button id="p" name="page" value="${currentPage + 1}">下一页</button>
            <button id="p" name="page" value="${totalPage}">末页</button>
            <%--<input type="hidden" value="0" id="starTime" name="page"/>--%>
        </div>
    </form>


    <script type="application/javascript">
        $("#datalist").click(function (e) {
            // var id = e.target.parentNode.parentNode.firstChild.textContent;
            var id = e.target.parentNode.parentNode.firstChild.nextSibling.firstChild.textContent
            var elem = e.target.value
            console.log(elem);
            console.log(e.target);
            console.log(id);

            if (elem==="删除"){
                $.ajax({
                    // type:"POST", delete.jsp
                    type:"GET",
                    url:"/serviceController/delete?serviceId="+id,
                    //    会自己返回到delete.jsp 需要才controller进行返回页面的处理

                    //动态刷新
                        success:function (resp) {
                            location.reload(true);
                        }
                })
            }
                //不能写else
                if(elem==="暂停") {
                $.ajax({
                    type:"GET",
                    url:"/serviceController/pause?serviceId="+id,
                    success:function (resp) {
                        location.reload(true);
                    //    页面在这里处理
                    }
                })
            }
            if (elem==="开通"){
                $.ajax({
                    type:"GET",
                    url:"/serviceController/start?serviceId="+id,
                    success:function (resp) {
                        location.reload(true);
                    }
                })
            }

            if (elem === "修改") {
                javascript:window.location.href='/serviceController/modiDetail?serviceId='+id;
            }
        })


    </script>
</div>
<!--主要区域结束-->
<div id="footer">
    <p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
    <p>版权所有(C)云科技有限公司 </p>
</div>
</body>
</html>